// index.jsx
import React, { useRef, useState, useEffect } from 'react';
import './index.css';

function Marquee() {
  const [index, setIndex] = useState(0);
  const marqueeRef = useRef(null);
  const content = [
    '鸣谢生命有你参与，笑纳我的邀请',
    '青春兵荒马乱，我们潦草地离散',
    '我对你付出的青春 这么多年',
    '我的心事，蒸发成云，再下场雨却舍不得淋湿你',
  ];
  useEffect(() => {
    const timer = setInterval(() => {
      if (!marqueeRef || !marqueeRef.current) return;

      const { height } = marqueeRef.current.getBoundingClientRect();
      const translateYItem = Math.floor(height / (content.length + 1));
      const nextIndex = index + 1;
      marqueeRef.current.style.transform = `translateY(-${translateYItem *
        nextIndex}px)`;
      marqueeRef.current.style.transition = 'transform 1s';

      if (index >= content.length - 1) {
        // 最后一个
        setTimeout(() => {
          setIndex(0);
          marqueeRef.current.style.transform = 'translateY(0px)';
          marqueeRef.current.style.transition = 'transform 0s';
        }, 1000);
      } else {
        setIndex(nextIndex);
      }
    }, 2000);
    return () => {
      clearInterval(timer);
    };
  }, [index]);
  return (
    <div className="marquee-container">
      <div className="marquee-wrapper">
        <div className="marquee-content" ref={marqueeRef}>
          {content.concat(content[0]).map((itm, i) => (
            <div key={`${itm}-${i}`} className="marquee-content-itm">
              {itm}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Marquee;
